// ============================== 导入依赖 ============================== //

import CORE from '@/CORE'
import mixPath from '../mixPath'
import mixForm from '../form/mixForm'
import mixParam from '../param/mixParam'
import UTIL from '../row/RowOperate/UTIL'
import SlotBtn from './SlotBtn'

// ============================== 导出混合 ============================== //

export default {
  /**
   * 混入列表 (配置选项合并)
   */
  mixins: [mixPath],

  /**
   * 组件导入
   */
  components: { SlotBtn },

  /**
   * 属性注册 (抽取以便查阅)
   */
  props: CORE.WEB.BtnCommon,

  /**
   * 计算属性 (慎用箭头函数)
   */
  computed: {
    /**
     * 父级的 Web 组件
     */
    parentWeb: mixParam.computed.parentWeb,

    /**
     * 模块路径
     */
    path: mixParam.computed.path,

    /**
     * 按钮尺寸
     */
    size: mixForm.computed.size,

    /**
     * 按钮类型
     */
    type() {
      const { primary, success, warning, danger, info, text, initType } = this
      if (primary) return 'primary'
      if (success) return 'success'
      if (warning) return 'warning'
      if (danger) return 'danger'
      if (info) return 'info'
      if (text) return 'text'
      if (initType) return initType
      return null
    },

    /**
     * 样式对象
     */
    styleObj() {
      const { width, getSize } = this
      return width ? { width: getSize(width) } : null
    },

    /**
     * 公共属性
     */
    commonProps() {
      const { elProps, className, styleObj, size, type, plain, round, circle, loading, disabled } = this
      return {
        ...elProps,
        class: `CoreWeb-Btn ${className}`,
        style: styleObj,
        size,
        type,
        plain,
        round,
        circle,
        loading,
        disabled,
      }
    },

    /**
     * 插槽属性
     */
    slotProps() {
      const { img, icon, title, verb, word } = this
      return {
        img: UTIL.getImg(img),
        icon: UTIL.getIcon(icon),
        title: title || `${verb}${word}`,
      }
    },
  },

  /**
   * 本地方法 (轻量重要在前)
   */
  methods: {
    /**
     * 按钮单击
     */
    toClick() {
      const { onClick, mutation, payload, commit } = this

      // 有指定方法
      if (onClick) onClick()
      // 有默认提交
      else if (mutation) commit(mutation, payload)

      // 最终都要触发事件
      this.$emit('click')
    },

    /**
     * 按钮双击
     */
    toDbClick() {
      this.$emit('dbClick')
    },
  },
}
